<template>
    <div>
        <el-form :model="form" :rules="rules" label-position="right" ref="form" label-width="160px">
			
			<el-form-item label="图片标题：" prop="cil_title">
				<el-col :span="8">
					<el-input v-model="form.cil_title" placeholder="请输入图片标题"></el-input>
				</el-col>
			</el-form-item>

            <el-form-item label="所属类别：" prop="cil_cicid">
				<el-col :span="8">
					<el-select style v-model="form.cil_cicid" placeholder="请选择所属类别">
						<el-option v-for="item in categoryData" :key="item.cic_id" :label="item.cic_name" :value="item.cic_id"></el-option>
					</el-select>
				</el-col>
			</el-form-item>

            <el-form-item label="图片描述：" prop="cil_describe">
				<el-col :span="8">
					<el-input type="textarea" v-model="form.cil_describe" rows="5" placeholder="请输入图片描述"></el-input>
				</el-col>
			</el-form-item>

            <el-form-item label="上传图片：" prop="cil_url">
			   <el-col :span="8">
				   <upload-image :preview="form.cil_url" v-on:cropperImage="cropperImageClick" v-on:uploadImageChange="uploadImageChange"></upload-image>
				   
				   <el-button @click="imgBoxBtn(form)" style="margin-top: 10px;">从图库选择</el-button>
			   </el-col>
		   </el-form-item>
			
			
			
			<el-form-item>
				<el-button type="primary" @click="submitForm('form')">提交</el-button>
				<el-button @click="resetForm">重置</el-button>
			</el-form-item>
			
		</el-form>
    </div>
</template>

<script>
    import { mapState,mapMutations } from 'vuex'
    export default {
        //数据源
        data(){
            return {
                //验证规则
                rules: {
                    cil_title: [
                        {required: true, message: '请输入图片标题', trigger: 'blur'}
                    ]
                }
            }
        },
        //初始化函数
        mounted() {
            //获取类别信息
			this.getCategoryData();
        },
        //计算属性
        computed: {
            ...mapState({
                form: state => state.AddGalleryImageModule.form,
                categoryData : state => state.AddGalleryImageModule.categoryData
			})
        },
        //组件方法
        methods: {
            
            cropperImageClick() {
				var that = this;
				this.$cropperImage({
					//裁切完成后回调函数
					cropperImageResult(file) {
                        that.$myLoading.startLoading()
						that.$http.Aliyun_uploadImageHttp(file, rsUrl => {
                            that.$myLoading.endLoading()
                            this.getImageSizeAndType(fileObj);
							that.form.cil_url = rsUrl;
						})
					},
					//要裁切的图片
					imgUrl: this.form.cil_url
				});
			},
			uploadImageChange(e){
                
                this.$myLoading.startLoading()
                var fileObj = e.target.files[0];
				this.$http.Aliyun_uploadImageHttp(fileObj,rsUrl => {
                    this.$myLoading.endLoading()
                    this.getImageSizeAndType(fileObj);
					this.form.cil_url = rsUrl
				});
			},
            getCategoryData(){
                this.$myLoading.startLoading();
				this.$http.getHttp(
					this.$API.cmsImageCategorySearch + "/skip/0/limit/1000/cic_is_delete/0",
					rs => {
						this.$myLoading.endLoading();
						this.$store.commit("AddGalleryImageModule/updateCategoryData", rs.data);
					}
				);
            },
            submitForm(form) {

				this.$refs[form].validate(valid => {
                    
                    var params = {
							cil_title: this.form.cil_title,
							cil_describe: this.form.cil_describe,
							cil_url: this.form.cil_url + "?type=custom",
							cil_size: this.form.cil_size,
							cil_format: this.form.cil_format,
							cil_create_time: this.$common.currentTime()
                        };
                    
						this.$myLoading.startLoading();
						this.$http.postHttp(this.$API.cmsImageLibraryAdd, params, rs => {
							this.$myLoading.endLoading();
							this.$myPop.SuccessMessage();
							this.resetForm();
						});
                    

				});
			},
			resetForm() {
				this.$store.commit("AddGalleryImageModule/clearForm");
            },
            //获取图片的大小和类型
            getImageSizeAndType(obj){

                //获取图片大小转化为kb
                this.form.cil_size = Math.ceil(obj.size / 1000);

                //获取图片类型，根据后缀获取
                this.form.cil_format = this.$common.getFileExtensionType(obj.name)


            },
            imgBoxBtn(items) {
                var that = this
                //回调函数
                this.$selectImageBox({
                    selectImageValue(item){
                    	console.log('------回调！？？！？！')
                    	console.log(item)
                    	items.cil_url = item;
                    }
                })
            },
        }
    }
</script>

<style lang="stylus" scoped>
@import '~PUBLIC_CSS';
</style>